<template>
  <el-form ref="form" :model="bsd" label-width="40px">
    <el-form-item label="X轴 ">
      <el-input v-model.number="bsd.width" type="number" placeholder="请输入" clearable @change="handleChange"></el-input>
    </el-form-item>
    <el-form-item label="Y轴 ">
      <el-input v-model.number="bsd.height" max="20" type="number" placeholder="请输入" clearable @change="handleChange"></el-input>
    </el-form-item>
	<el-form-item label="模糊 ">
	  <el-input v-model.number="bsd.radius" max="20" type="number" placeholder="请输入" clearable @change="handleChange"></el-input>
	</el-form-item>
	<el-form-item label="扩展">
	  <el-input v-model.number="bsd.spread" max="20" type="number" placeholder="请输入" clearable @change="handleChange"></el-input>
	</el-form-item>
    <el-form-item label="颜色">
      <el-color-picker v-model="bsd.color" max="20" @change="handleChange" />
    </el-form-item>
  </el-form>
</template>
<script>

export default {
  name: 'UIBoxShadow',
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data () {
    const bsd = this.value
    return {
      bsd: {
        color: bsd.c,
        width: bsd.x,
		height: bsd.y,
		radius: bsd.s,
		spread: bsd.p
      }
    }
  },
	watch:{
		value(new_val,old_val){
			this.bsd.color=new_val.c
			this.bsd.width=new_val.x
			this.bsd.height=new_val.y
			this.bsd.radius=new_val.s
			this.bsd.spread=new_val.p
		}
	},
  methods: {
    handleChange () {
      const bsd = this.bsd
      this.$emit('change', {
        key: 'bsd',
        value: {
          x: bsd.width,
          c: bsd.color,
		  y: bsd.height,
		  s: bsd.radius,
		  p: bsd.spread
        }
      })
    }
  }
}
</script>

<style>
	input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
</style>
